<template>
	<view>
		<!-- 头部分类 -->
		<view class="tagNav">
			<view class="tagNavText text-center" :class="{tagClass:navCurrent === index}"
				v-for="(item,index) in navTagList" :key="index" @click="change(index)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
      <view class="listItemFlex" v-for="(data,index) in list" :key="index" @click="gotoPage('/pages/player/player?tvId='+ data.id)">
        <view class="itemIMgBox itemHitShiow">
          <view class="itemImgSubscript img1" v-if="index === 0">{{index + 1}}</view>
          <view class="itemImgSubscript img2" v-if="index === 1">{{index + 1}}</view>
          <view class="itemImgSubscript img3" v-if="index === 2">{{index + 1}}</view>
          <view class="itemImgSubscript img4" v-if="index > 2">{{index + 1}}</view>
          <image :src="data.tvImage" mode=""></image>
          <view class="itemNum">
            <image src="@/static/benefit/path.png" mode="" class="NumIcon" :style="{height: '300rpx'}"></image>
          </view>
          <view class="itemImgBot">全{{data.allSeries}}集</view>
        </view>
        <view class="itemInfo">
          <view class="infoTitle">
            {{data.tvName}}
            <view class="titleRight">
              <u--image :showLoading="true" src="/static/benefit/redPath.png" width="24rpx" height="28rpx" style="margin-right: 5rpx;"></u--image>
              <view>{{data.heat >= 10000 ? (data.heat/10000).toFixed(1) + '万' : data.heat}}</view>
            </view>
          </view>
          <view class="infoTag">
            <view class="tagItem">{{data.follows}}人在追</view>
            <view class="tagItem">{{data.likes}}人点赞</view>
          </view>
          <view class="infoType">{{data.classify}}</view>
          <view class="infoInfo" :style="{color: '#9B9B9B'}">{{data.introduce}}</view>
        </view>
      </view>
		</view>
<!--    <u-loadmore :status="pageObj.status" :nomoreText="null" fontSize="28" iconSize="32"/>-->
	</view>
</template>

<script>
	import listItemVue from '../../../components/listItem.vue';
	import {Api} from "@/service/api";
  import {gotoPage} from "../../../utils/common";
	export default {
		components:{
			listItemVue
		},
		data() {
			return {
				navCurrent:0,
				navTagList:[
					{name:"热播榜"},
					{name:"飙升榜"},
					{name:"新剧榜"},
					// {name:"热搜榜"},
				],
        pageObj: {
          pageSize: 9,
          pageNum: 0,
          status: 'loading'
        },
				list: [],
			};
		},
		methods:{
      gotoPage,
      change(index){
        this.navCurrent = index
        this.getList()
      },
			async getList() {
        uni.showLoading({
          title: "正在加载...",
          mask: true // 是否显示透明蒙层，防止触摸穿透
        });
        if(this.navCurrent === 0) this.list = (await Api.hotList()).data
        if(this.navCurrent === 1) this.list = (await Api.upList()).data
        if(this.navCurrent === 2) this.list = (await Api.newList()).data
        console.log(this.list)
        uni.hideLoading();
				// if(this.pageObj.status === 'nomore') return
				// this.pageObj.status = 'loading'
			  // const res = await Api.getRankList({
				//   pageNo:  ++ this.pageObj.pageNum,
				//   pageSize: this.pageObj.pageSize,
			  // })
			  // this.list = this.list.concat(res.data.list)
			  // if(this.list.length < res.data.total)  this.pageObj.status = 'loadmore'
			  // else this.pageObj.status = 'nomore'
			 //  res.data.forEach(item => {
				// this.list.push({
				//   ...item,
				//   image: item.tvImage,
				//   title: item.tvName,
				//   src: item.videoSrc
				// })
			 //  })
			},
		},
		created(){
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.tagNav {
		display: flex;
		//justify-content: space-around;
    gap: 30rpx;
    margin-bottom: 20rpx;

		.tagNavText {
			display: flex;
      justify-content: center;
      align-items: center;
			background-color: #F5F5F8;
			width: 114rpx;
			height: 60rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
			color: #686767;
			font-weight: 500;
			font-size: 28rpx;
		}

		.tagClass {
			background-color: #FFF0F3;
			color: #E81F4B;
		}
	}
	.listBox{
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .listItemFlex {
      display: flex;
      .itemIMgBox {
        position: relative;
        height: 260rpx;
        image {
          width: 190rpx;
          height: 100%;
          border-radius: 16rpx;
          z-index: 1;
        }

        .itemImgSubscript {
          position: absolute;
          top: 0;
          left: 14rpx;
          font-size: 28rpx;
          font-weight: 700;
          color: #FFFFFF;
          z-index: 2;
          text-align: center;
          line-height: 44rpx;
          //background-image: url("../../../static/benefit/imgSortBg.png");
          background-size: 100%;
          width: 40rpx;
          height: 43rpx;
        }

        .img1 {
          background-image: url("../../../static/benefit/imgSortBg.png");
        }

        .img2 {
          background-image: url("../../../static/benefit/imgSortBg2.png");
        }

        .img3 {
          background-image: url("../../../static/benefit/imgSortBg3.png");
        }

        .img4 {
          background-image: url("../../../static/benefit/imgSortBg4.png");
        }


        .itemImgBot {
          position: absolute;
          bottom: 8rpx;
          right: 20rpx;
          color: #FFFFFF;
          font-size: 24rpx;
          z-index: 2;
        }

      }

      .itemInfo {
        margin-left: 22rpx;
        //padding: 26rpx 0 28rpx;

        .infoTitle {
          color: #2A2A2A;
          font-size: 28rpx;
          font-weight: 700;

          .titleRight {
            float: right;
            font-size: 36rpx;
            display: flex;
            align-items: center;

            image {
              width: 22rpx;
              height: 30rpx;
            }
          }
        }

        .infoTag {
          display: flex;
          margin: 20rpx 0 18rpx;

          view {
            width: 142rpx;
            height: 40rpx;
            background-color: #FFF2E1;
            border-radius: 8rpx;
            color: #936834;
            font-size: 20rpx;
            font-weight: 500;
            text-align: center;
            line-height: 40rpx;

            &:nth-child(n+2) {
              margin-left: 16rpx;
            }
          }
        }

        .infoType {
          color: #9B9B9B;
          font-size: 20rpx;
        }

        .infoInfo {
          color: #9B9B9B;
          font-size: 20rpx;
          margin-top: 14rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
          text-overflow: ellipsis;
          min-width: 486rpx;
        }
      }
    }
	}
</style>
